<template>
  <view class="container">
    <view class="padding">
      <image
          src="https://ydh5res.onlineweixin.com/cy2/bzinfo_files/baogao-title.png" alt=""
          style="display: block; width: 508rpx;height: 67rpx; margin: 0px auto 30rpx;"
      ></image>
      <image @click="toPage('/pages/report/report1?ac=xingzuo&oid=' +oid)"
             src="https://ydh5res.onlineweixin.com/cy2/bzinfo_files/baogao2.png?v=1" alt=""
             style="display: block; width: 690rpx;height: 376rpx; margin: 0px auto 30rpx;"></image>
      <!--      <image-->
      <!--          src="https://ydh5res.onlineweixin.com/cy2/bzinfo_files/baogao1.png?v=1" alt=""-->
      <!--          style="display: block; width: 690rpx;height: 376rpx; margin: 0px auto 30rpx;"></image>-->
      <image
          src="https://ydh5res.onlineweixin.com/cy2/bzinfo_files/baogao3.png?v=1" alt="" @click="showWxInfo"
          v-if="(version === 'B1' || version==='C1') && openExtraServe === 1"
          style="display: block; width: 690rpx;height: 376rpx; margin: 0px auto 30rpx;"></image>

      <image src="https://ydh5res.onlineweixin.com/cy2/bzinfo_files/baogao3n.png" alt="" @click="editInfo"
             v-if="(version === 'B1' || version==='C1') && openExtraServe === 2"
             style="display: block; width: 690rpx;height: 376rpx; margin: 0px auto 30rpx;"></image>
    </view>

    <view @click="copy" class="public_footer_help">
      如需帮助
      <uni-icons type="headphones" size="20" color="#fff" class="margin-lr-xs"></uni-icons>
      请联系QQ售后客服
    </view>
    <uni-popup ref="info" type="center" :is-mask-click="false">
      <view class="birth-box">
        <image src="https://yundao888.oss-cn-beijing.aliyuncs.com/cy2/bzinfo_files/daizhifu-xcx.png" alt=""
               class="bg bg1"
               mode="widthFix"></image>
        <view class="form-box">
          <view class="text-lg text-bold text-black margin-bottom">你的信息</view>
          <view class="margin-bottom-sm">
            <view class="flex align-center margin-bottom-sm">
              <view class="text-df text-black">你的姓名：{{ formInfo.name }}</view>
              <view class="text-df text-black margin-left-xl">性别：{{ formInfo.sex == 1 ? '男' : '女' }}</view>
            </view>
            <view class="text-df text-black">生日：{{ formInfo.birthdayText }}</view>
          </view>
          <view class="text-lg text-bold text-black margin-bottom">输入你的现状诉求</view>

          <image src="https://ydh5res.onlineweixin.com/cy2/index_files/luru.png" class="title-btn"
                 v-show="formInfo.needExtraServe === 1 && formInfo.needExtraServeType === 0"></image>
          <view class="desc-btn-list margin-bottom-sm"
                v-show="formInfo.needExtraServe === 1 && formInfo.needExtraServeType === 0">
            <image src="https://ydh5res.onlineweixin.com/cy2/index_files/wenzi.png"
                   class="desc-btn" @click="formInfo.needExtraServeType = 1">
            </image>
            <image
                src="https://ydh5res.onlineweixin.com/cy2/index_files/yuyin.png" class="desc-btn"
                @click="formInfo.needExtraServeType = 2"></image>
          </view>
          <view class="desc-text margin-bottom-sm"
                v-show="formInfo.needExtraServe === 1 && formInfo.needExtraServeType === 1">
            <view class="text-info">
              <image src="https://ydh5res.onlineweixin.com/cy2/index_files/back.png" class="back-btn"
                     @click="formInfo.needExtraServeType = 0"></image>
              <textarea placeholder="请在此输入您的诉求" v-model="formInfo.customContent"></textarea>
            </view>
          </view>
          <view class="desc-audio margin-bottom-sm"
                v-show="formInfo.needExtraServe === 1 && formInfo.needExtraServeType === 2">
            <view class="text-info">
              <image src="https://ydh5res.onlineweixin.com/cy2/index_files/back.png" class="back-btn"
                     @click="formInfo.needExtraServeType = 0"></image>
              <view class="play-audio" v-show="audioState === 2" @click="playVoice">
                <image src="https://ydh5res.onlineweixin.com/cy2/index_files/play-btn.png"
                       class="audio-play"></image>
                <image v-show="playState" @click="playState = false"
                       src="https://ydh5res.onlineweixin.com/cy2/index_files/bofangzhong.gif" class="audio-gif"
                ></image>
                <image v-show="!playState" @click="playState = true"
                       src="https://ydh5res.onlineweixin.com/cy2/index_files/bofangxian.png" class="audio-png"
                ></image>
                <text id="voiceTime">{{ formInfo.voiceTime }}</text>
              </view>
              <view class="star-box" @click="startAudio" v-show="audioState === 0">
                <image src="https://ydh5res.onlineweixin.com/cy2/index_files/star-btn.png"
                       class="star-btn"></image>
                <view>开始录音</view>
              </view>
              <view class="ing-box" @click="endRecord" v-show="audioState === 1">
                <image
                    src="https://ydh5res.onlineweixin.com/cy2/index_files/luyinzhong.gif" class="star-btn"></image>
                <view>正在录音,点击结束录制</view>
              </view>
              <view class="end-box" @click="startAudio" v-show="audioState === 2">
                <image
                    src="https://ydh5res.onlineweixin.com/cy2/index_files/star-btn.png" class="star-btn"></image>
                <view>重新录音</view>
              </view>
            </view>
          </view>

          <view class="text-lg text-bold text-black margin-bottom">你的微信号</view>

          <view class="wx-input"><input type="text" placeholder="请输入可被搜索到的微信号"
                                        v-model="formInfo.wechatNumber"></view>

          <view class="submit-btn" v-if="openExtraServe === 2" @click="toPay">支付
            <text id="serverMoney">0.01</text>
            元 导师服务
          </view>
          <view class="submit-btn-tips" v-if="openExtraServe === 2">支付后，请耐心等待导师联系</view>

          <view class="submit-btn" v-if="openExtraServe === 1" @click="toSubmit">提交信息</view>
          <view class="submit-btn-tips" v-if="openExtraServe === 1">提交信息后，请耐心等待导师联系</view>


        </view>
        <view class="close-btn flex align-center justify-center" @click="hideInfo">
          <image
              src="https://ydh5res.onlineweixin.com/cy2/index_files/close-x.png" alt=""
              style="width: 50rpx; height: 50rpx;"></image>
        </view>

      </view>
    </uni-popup>
    <uni-popup ref="wxInfo" type="center" :is-mask-click="false">
      <view class="mode-content">

        <view class="text-df text-blue text-center margin-bottom-sm">已提交，请等待导师加微信！</view>
        <view class="text-df text-blue text-center margin-bottom-sm">预计24小时内</view>
        <view class="text-df text-blue text-center ">已提交微信号：
          <text>{{ formInfo.wechatNumber }}</text>
        </view>
        <view class="close-btn" @click="hideWxInfo">
          <image src="https://ydh5res.onlineweixin.com/cy2/index_files/close-x.png" alt=""
                 style="width: 50rpx; height: 50rpx;"></image>
        </view>
      </view>
    </uni-popup>

    <view class="right-btn flex align-center justify-between flex-direction">
      <view @click="toPage('/pages/orderList/orderList')">
        <image src="https://yundao888.oss-cn-beijing.aliyuncs.com/cy2/bzinfo_files/chaxun.png" mode="widthFix" alt=""></image>
        <view>
          订单查询
        </view>
      </view>
      <view style="width: 30rpx;border-bottom: 2rpx solid #fff;margin: 15rpx 0;"></view>
      <view @click="toPage('/pages/msg/index')">
        <image src="https://yundao888.oss-cn-beijing.aliyuncs.com/cy2/bzinfo_files/zhuyi.png" mode="widthFix" alt=""></image>
        <view>
          售后客服
        </view>
      </view>
    </view>
  </view>


</template>

<script>
import {confirm, loaded, loading, toast, toPage} from "../../tools";
import {getBaZeShowData, getOrderInfo, getType, payOrder, postExtraServeData, submitInfo} from "../../api";
import {APPID} from "../../config";

export default {
  data() {
    return {
      oid: '',
      version: 'B1',
      formInfo: {
        name: '',
        sex: '',
        birthday: '',
        birthday2: '',
        birthdayText: '',
        needExtraServe: 1,  // 1:需要 2:不需要
        needExtraServeType: 0,  // 0:不选  1:文字  2:语言
        customContent: '', // 自定义内容
        voice: '', // 语音
        voiceTime: 0, // 语音时长
        wechatNumber: '', // 预留的微信号
      },
      openExtraServe: 2,
      wechatNumber: '',

      Animal: '',
      submitBirthday: {},

      audioState: 0,
      playState: false,
    };
  },
  async onLoad(options) {
    this.oid = options.oid
    const data = await getType({
      appid: APPID
    })
    if (data.status === 200) {
      // this.version = data.data.version
    }
  },
  onShow() {
    loading('加载中...')
    this.recorderManager = uni.getRecorderManager();
    this.innerAudioContext = uni.createInnerAudioContext();

    // 为了防止苹果手机静音无法播放
    // uni.setInnerAudioOption({
    //   obeyMuteSwitch: false
    // })

    this.innerAudioContext.autoplay = true;

    console.log("uni.getRecorderManager()", uni.getRecorderManager())
    let self = this;
    this.recorderManager.onStop(function (res) {
      console.log("录音结束", res)
      self.formInfo.voiceTime = parseInt(res.duration / 1000)
      uni.uploadFile({
        url: 'https://cydl.hbmingpai.com/index.php/index/index/douYinAppletUploadToOss', //仅为示例，非真实的接口地址
        filePath: res.tempFilePath,
        name: 'audioData',

        success: (uploadFileRes) => {
          console.log("uploadFileRes", uploadFileRes)
          self.formInfo.voice = JSON.parse(uploadFileRes.data).data;
        }
      });


      // self.formInfo.voice = 'https://yundao888.oss-cn-beijing.aliyuncs.com/demo/horse.mp3';
    });
    this.innerAudioContext.onPlay(function () {
      self.playState = true
    });
    this.innerAudioContext.onEnded(function () {
      self.playState = false
    });
    this.innerAudioContext.onStop(function () {
      self.playState = false
    })
    uni.getProvider({
      service: 'payment',
      success: function (res) {
        uni.setStorageSync('providerpayment', res.provider[0]);
      }
    });
    this.getBaZeShowData()
  },

  methods: {
    toPage,

    async getBaZeShowData() {
      const res = await getBaZeShowData({
        ac: 'getBaZeShowData',
        oid: this.oid,
      })
      this.formInfo = {
        name: res.moreData.username,
        sex: Number(res.moreData.gender),
        birthday: {
          year: JSON.parse(res.birthdayJson).yy,
          month: JSON.parse(res.birthdayJson).mm,
          day: JSON.parse(res.birthdayJson).dd,
        },
        birthday2: {
          year: JSON.parse(res.birthdayJson)._yy,
          month: JSON.parse(res.birthdayJson)._mm,
          day: JSON.parse(res.birthdayJson)._dd,
        },
        birthdayText: res.moreData.lDate,
        // birthday: res.moreData.birthdayJson,
        needExtraServe: 1,  // 1:需要 2:不需要
        needExtraServeType: res.needExtraServeType ? Number(res.needExtraServeType) : 0,  // 0:不选  1:文字  2:语言
        customContent: res.customContent, // 自定义内容
        voice: res.voice, // 语音
        voiceTime: res.voiceTime, // 语音时长
        wechatNumber: res.wechatNumber, // 预留的微信号
      }
      this.submitBirthday = JSON.parse(res.birthdayJson)
      this.openExtraServe = Number(res.openExtraServe)
      this.wechatNumber = res.wechatNumber
      loaded()
    },


    async editInfo() {

      await this.getBaZeShowData()
      if(this.openExtraServe === 1 && !this.formInfo.wechatNumber){
        await this.$refs.info.open();
      }else{
        await this.$refs.wxInfo.open();
      }

    },
    hideInfo() {
      this.$refs.info.close();
    },
    showWxInfo() {
      this.$refs.wxInfo.open();
    },
    hideWxInfo() {
      this.$refs.wxInfo.close();
      this.getOrderInfo()
    },
    copy() {

      confirm('温馨提示', '客服QQ号：1312507423 已复制，请前去咨询。', () => {
        uni.setClipboardData({
          data: '1312507423',
          success: function () {
            console.log('success');
          }
        });
      }, '确定', false)
    },
    startAudio() {
      this.formInfo.voice = ''
      this.formInfo.voiceTime = 0
      this.audioState = 1
      this.recorderManager.start({
        format: 'wav'
      });
      // this.voiceTimer = setInterval(() => {
      //   this.formInfo.voiceTime += 1
      // }, 1000)
    },
    endRecord() {
      this.audioState = 2
      // clearInterval(this.voiceTimer)
      this.recorderManager.stop()


    },
    playVoice() {
      if (!this.playState) {
        console.log(this.formInfo.voice)
        if (this.formInfo.voice) {
          this.innerAudioContext.src = this.formInfo.voice;
          this.innerAudioContext.play()
        }
      } else {
        this.playState = false
        this.innerAudioContext.stop()
      }

    },
    async toPay() {
      if (this.formInfo.needExtraServeType === 0) {
        return toast('请填写或录制问题诉求');
      }
      if (this.formInfo.needExtraServeType === 1 && !this.formInfo.customContent) {
        return toast('请填写问题诉求');
      }

      if (this.formInfo.needExtraServeType === 2 && !this.formInfo.voice) {
        return toast('请录制问题诉求');
      }

      let _dataOther = {
        oid: this.oid,
        needExtraServe: this.formInfo.needExtraServe,
        needExtraServeType: this.formInfo.needExtraServeType,
        customContent: this.formInfo.customContent,
        voice: this.formInfo.voice,
        voiceTime: this.formInfo.voiceTime,
        wechatNumber: this.formInfo.wechatNumber,
      }

      loading('保存中...')
      const res = await postExtraServeData(_dataOther)
      if (res.code === 200) {
        await this.toReport(res.oid)
      }

      //


    },

    async toReport(oid) {
      let that = this
      const res = await payOrder({
        oid,
      })
      if (res.status === 200) {
        let _data = JSON.parse(res.data)
        let that = this
        uni.requestPayment({
          provider: uni.getStorageSync('providerpayment'),
          orderInfo: _data.data,
          service: 5,
          success: (res) => {
            that.getOrderInfo(oid)
          },
          fail: (e) => {
            that.getOrderInfo()
          }
        })
      }
    },
    async getOrderInfo(oid) {
      const res = await getOrderInfo({
        oid,
      })
      if (res.data.status === 1) {
        await this.getBaZeShowData()
        this.$refs.info.close()
        this.$refs.wxInfo.open()
      } else {
        await this.getBaZeShowData()
        toast('支付失败，请重试！')
        this.$refs.info.close()
        this.$refs.wxInfo.open()
      }
    },

    async toSubmit() {
      if (this.formInfo.needExtraServeType === 0) {
        return toast('请填写或录制问题诉求');
      }
      if (this.formInfo.needExtraServeType === 1 && !this.formInfo.customContent) {
        return toast('请填写问题诉求');
      }

      if (this.formInfo.needExtraServeType === 2 && !this.formInfo.voice) {
        return toast('请录制问题诉求');
      }

      let _dataOther = {
        oid: this.oid,
        needExtraServe: this.formInfo.needExtraServe,
        needExtraServeType: this.formInfo.needExtraServeType,
        customContent: this.formInfo.customContent,
        voice: this.formInfo.voice,
        voiceTime: this.formInfo.voiceTime,
        wechatNumber: this.formInfo.wechatNumber,
      }

      loading('保存中...')
      const res = await postExtraServeData(_dataOther)
      if (res.code === 200) {
        await this.getBaZeShowData()
        this.$refs.wxInfo.open()
      }
    }
  },
  watch: {
    'formInfo.needExtraServe'() {
      if (this.formInfo.needExtraServe === 2) {
        this.formInfo.needExtraServeType = 0
        this.formInfo.customContent = ''
        this.formInfo.voice = ''
        this.formInfo.voiceTime = 0
        this.formInfo.wechatNumber = ''
        this.audioState = 0
        this.playState = false
        //  执行方法 停止录音
        //  执行方法 播放
      }
    },
    'formInfo.needExtraServeType'() {
      this.formInfo.customContent = ''
      this.formInfo.voice = ''
      this.formInfo.voiceTime = 0
      this.formInfo.wechatNumber = ''
      this.audioState = 0
      this.playState = false
      //  执行方法 停止录音
      //  执行方法 播放
    }
  }
}
</script>

<style lang="scss">
.container {
  width: 750rpx;
  overflow-x: hidden;

  .public_footer_help {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 30rpx;
    color: #fff;

  }

  .birth-box {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 705rpx;
    height: 1108rpx;
    color: #26639d;
    font-size: 28rpx;


    .bg {
      width: 705rpx;
      height: 1108rpx;
      position: absolute;
      top: 0;
      left: 0;


    }


    .form-box {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      padding: 260rpx 80rpx 0;
      box-sizing: border-box;

      .needJh {

        width: 100%;
        height: 100rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .title {


          font-size: 30rpx;
          margin-right: 40rpx;
        }

        .chooseSlider {
          width: 280rpx;
          height: 40rpx;
          border-radius: 30rpx;
          background: #b2c6dc;
          position: relative;

          view {
            position: absolute;
            left: 0;
            top: -10rpx;
            width: 180rpx;
            height: 60rpx;
            border-radius: 30rpx;
            border: 4rpx solid #fff;
            transition: .3s linear all;
            box-sizing: border-box;

            &.active {
              left: 100rpx;

              text {
                color: #fff;
                border: 10rpx solid #163d64;
                background: #163d64;
              }
            }

            text {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 100%;
              height: 100%;
              background: #b2c6dc;
              border-radius: 30rpx;
              border: 10rpx solid #97b4d4;
              color: #fff;
              box-sizing: border-box;
            }
          }
        }
      }

      .title-btn {

        display: block;
        width: 320rpx;
        height: 45rpx;
        margin: 20rpx auto;
      }

      .desc-btn-list {

        display: flex;
        align-items: center;
        justify-content: space-between;

        .desc-btn {
          display: block;
          width: 267rpx;
          height: 116rpx;
        }
      }

      .desc-text {
        display: block;
        width: 560rpx;
        margin: 0 auto 20rpx;

        .desc-title {
          font-size: 21rpx;
          line-height: 150%;
          color: #65768b;
          text-align: center;
          margin-bottom: 20rpx;
        }

        .text-info {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          flex-direction: column;
          width: 560rpx;
          height: 250rpx;
          padding: 20rpx;
          border-radius: 20rpx;
          background: #fff;
          box-sizing: border-box;

          .back-btn {
            display: block;
            width: 64rpx;
            height: 41rpx;
          }

          textarea {
            display: block;
            width: 100%;
            height: 160rpx;
            border: 0;
            font-size: 26rpx;
            line-height: 150%;
            color: #26639d;
            box-sizing: border-box;
          }
        }
      }

      .desc-audio {
        display: block;
        width: 560rpx;
        margin: 0 auto 20rpx;

        .desc-title {
          font-size: 21rpx;
          line-height: 150%;
          color: #65768b;
          text-align: center;
          margin-bottom: 20rpx;
        }

        .text-info {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          flex-direction: column;
          width: 560rpx;
          height: 250rpx;
          padding: 20rpx;
          border-radius: 20rpx;
          background: #fff;
          box-sizing: border-box;

          .back-btn {
            display: block;
            width: 64rpx;
            height: 41rpx;
          }

          .play-audio {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15rpx 20rpx;
            background: #26639d;
            border-radius: 10rpx;

            .audio-play {
              width: 35rpx;
              height: 35rpx;
              display: block;
              margin-right: 20rpx;
            }

            .audio-gif {
              width: 120rpx;
              height: 35rpx;
              display: block;
              margin-right: 20rpx;
            }

            .audio-png {
              width: 120rpx;
              height: 35rpx;
              display: block;
              margin-right: 20rpx;
            }

            text {
              font-size: 26rpx;
              line-height: 35rpx;
              color: #fff;
            }
          }

          .star-box {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-direction: column;

            image {
              display: block;
              width: 100rpx;
              height: 100rpx;
              margin: 0 auto 30rpx;
            }

            view {
              font-size: 26rpx;
              line-height: 35rpx;
            }
          }

          .ing-box {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-direction: column;

            image {

              display: block;
              width: 205rpx;
              height: 90rpx;
              margin: 0 auto 30rpx;
            }

            view {
              font-size: 26rpx;
              line-height: 35rpx;
            }
          }

          .end-box {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-direction: column;

            image {
              display: block;
              width: 50rpx;
              height: 50rpx;
              margin: 0 auto 10rpx;
            }

            view {
              font-size: 26rpx;
              line-height: 35rpx;
            }
          }
        }
      }


      .wx-input {
        display: block;
        width: 100%;

        input {
          display: block;
          width: 100%;
          height: 80rpx;
          background: #fff;
          border-radius: 10rpx;
          border: 0;
          padding: 0 20rpx;
          font-size: 30rpx;
          box-sizing: border-box;
        }
      }

      .submit-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 80rpx;
        color: #fff;
        background: #009acd;
        border-radius: 10rpx;
        border: 0;
        padding: 0 20rpx;
        font-size: 30rpx;
        margin-top: 30rpx;
        box-sizing: border-box;
      }

      .submit-btn-tips {
        font-size: 26rpx;
        text-align: center;
        line-height: 48rpx;
        width: 100%;
        color: #009acd;
      }

    }


    .close-btn {
      position: absolute;
      left: 0;
      bottom: -60rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 705rpx;
    }

  }

  .mode-content {
    width: 600rpx;
    margin: 0px auto;
    background: rgb(255, 255, 255);
    border-radius: 30rpx;
    border: 8rpx solid rgb(69, 146, 221);
    padding: 30rpx;
    box-sizing: border-box;
    position: relative;

    .close-btn {
      position: absolute;
      left: 0;
      bottom: -100rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 600rpx;
    }
  }

  .right-btn{
    position: fixed;
    right:0;
    top: 10vh;
    background: rgba(0,0,0,.5);
    padding: 10rpx;
    border-radius: 10rpx 0 0 10rpx;
    image{
      width: 40rpx;
      height: 40rpx;
    }
    view{
      width: 40rpx;
      color: #fff;
      text-align: center;
      font-size: 28rpx;
    }
  }
}
</style>
